<template>
  <div class="travelMap">
      <div id="main"></div>
  </div>
</template>

<script>
import genJson from '@/assets/datachina.json'
import {getTravel} from '@/service/api/login'
  export default {
    created(){
     getTravel().then(res=>{
      if(res.data.status === 200){
        const {points,linesData} = res.data.data
        this.drow(points,linesData)
       
      }
     })
    },
   methods:{
    drow(points,linesData){
    const myChart = this.$echarts.init(document.getElementById('main'))
    this.$echarts.registerMap('china',genJson)
    let option ={
      backgroundColor:'#f6cec1',
      geo:{
          map:'china',
          aspectScale:0.75,
          zoom:1.1,
          regions:[{
            name:'南沙诸岛'
          }],
          label:{
            normal:{
              show:true,
              textStyle:{
                color:'#f8ebe6'
              }
            },
            emphasis:{
              textStyle:{
                color:'#4d4030'
              }
            }
          },
          itemStyle:{
            normal:{  
              borderWidth:1,
              areaColor:{
                type:'radial',
                x:0.5,
                y:0.5,
                r:0.8,
                colorStops:[{
                  offset:0,
                  color:'#7c1823'
                },{
                  offset:1,
                  color:'#82202b'
                }
              ],
              globalCoord:true,
          
              },
            },
            emphasis:{
              areaColor:'#fff',
              borderWidth:0,
              
            }
          }
      },
      series:[
        {
          type:'map',
          label:{
            normal:{
              show:true,
              textStyle:{
                color:'#f8ebe6'
              },
            },
            emphasis:{
              textStyle:{
                color:'#4d4030'
              }
            }
          },
          zoom:1.1,
          map:'china',
          itemStyle:{
            normal:{  
              borderWidth:1,
              areaColor:{
                type:'radial',
                x:0.5,
                y:0.5,
                r:0.8,
                colorStops:[{
                  offset:0,
                  color:'#7c1823'
                },{
                  offset:1,
                  color:'#82202b'
                }
              ],
              globalCoord:true,
              
              },
            },
            
            emphasis:{
              areaColor:'#fff',
              borderWidth:0,
              
            }
          }
        },
        {
          type:'effectScatter',
          coordinateSystem:'geo',
          showEffectOn:'render',
          symbolSize:10,
          zlevel:1,
          data:points,
          rippleEffect:{
            period:15,
            scale:4,
            brushType:'fill'
          }
        },
        {
          type:'lines',
          zlevel:2,
          effect:{
            show:true,
            period:4,
            symbol:'arrow',
            symbolSize:7,
            trailLength:0.4
          },
          lineStyle:{
            normal:{
              color:'#1DE9B6',
              width:1,
              opacity:0.1,
              curveness:0.6,
            
            }
          },
          data:linesData
        }
      ]
    }
    myChart.setOption(option)
    }
   }
  }
</script>

<style lang="scss" scoped>
  .travelMap{
    width: 100%;
    #main{
      width: 100%;
      height: 850px;
    }
  }
</style>